<template>
	<view class="content">
		<nav-header bgColor="bg-custom-color" :isBack="true">
			<block slot="content">{{$t('record.title')}}</block>
		</nav-header>


		<view class="cu-list menu card-menu margin-top wallet">
			<!-- <view class="cu-item">
				<view class="content et-content">
					<text class="text-grey et-text lc1-1 bg-color">USDT</text>
				</view>
			</view> -->
			<view class="cu-item">
				<view class="content et-content">
					<text class="text-grey" style="margin-left: 10px;">{{$t('record.TotalAchievement')}}:</text>
					<!-- <text class="text-color">{{userInfo.leijiMoneyUser + datas.userSonSumMoneyLeiji+datas.jianTuiSumMoneyLeiji}}</text> -->
					<text class="text-color">100</text>
				</view>
			</view>

			<view class="lc2-son bg-color1 border-bottom">
				<view class="lc2-son1 lc2-son-par">
					<text class="lc2-son1-text">{{$t('record.PersonalAchievement')}}</text>
					<text class="lc2-son1-text">{{$t('record.DirectPushAchievement')}}</text>
					<text class="lc2-son1-text">{{$t('record.PushBetweenAchievement')}}</text>
				</view>
				<view class="lc2-son2 lc2-son-par">
					<text class="lc2-son2-text text-color">0</text>
					<text class="lc2-son2-text text-color">0</text>
					<text class="lc2-son2-text text-color">0</text>
					<!-- <text class="lc2-son2-text text-color">{{userInfo.leijiMoneyUser||0}}</text> -->
					<!-- <text class="lc2-son2-text text-color">{{datas.userSonSumMoneyLeiji}}</text> -->
					<!-- <text class="lc2-son2-text text-color">{{datas.jianTuiSumMoneyLeiji}}</text> -->
				</view>
			</view>

			<scroll-view scroll-x class="bg-custom-color nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabs" :key="index"
					 @tap="tabSelect(item,index)" :data-id="index">
						{{item.name}}({{item.count}})
					</view>
				</view>
			</scroll-view>

			<view class="cu-card article">
				<view class="lc2-son bg-color1">
					<view class="lc2-son1 lc2-son-par">
						<text class="lc2-son1-text">{{$t('register.userName')}}</text>
						<text class="lc2-son1-text">{{$t('record.type')}}</text>
						<text class="lc2-son1-text">{{$t('record.Income')}}</text>
						<text class="lc2-son1-text">{{$t('time')}}</text>
					</view>
				</view>
				<view class="cu-item shadow cu-item-box" v-for="(item, index) in list" v-bind:key="index">
					<view class="lc2-son bg-color1">
						<view class="lc2-son1 lc2-son-par" v-if="index == 0">
							<text class="lc2-son2-text text-color">{{item.addUname}}</text>
							<text class="lc2-son2-text text-color">{{item.map.orderMoney}}{{$t('record.order')}}</text>
							<text class="lc2-son2-text text-color">{{item.biNo}}</text>
							<text class="lc2-son2-text text-color">{{$common.dateFormat(item.addDate)}}</text>
						</view>

						<view class="lc2-son1 lc2-son-par" v-if="index != 0">
							<text class="lc2-son2-text text-color">{{item.map.realName}}</text>
							<text class="lc2-son2-text text-color">{{item.map.orderMoney}}{{$t('record.order')}}</text>
							<text class="lc2-son2-text text-color">{{item.map.biNo}}</text>
							<text class="lc2-son2-text text-color">{{$common.dateFormat(item.map.recordAddDate)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let t;
	export default {
		data() {
			return {
				TabCur: 0,
				list: [],
				userInfo: null,
				datas: {},
				tabs: [{
					name: '个人业绩',
					id: 'geren',
					list: [],
					count: 0
				}, {
					name: '直推业绩',
					id: 'zhitui',
					list: [],
					count: 0
				}, {
					name: '间推业绩',
					id: 'jiantui',
					list: [],
					count: 0
				}]
			}
		},
		onLoad() {
			t = this;
			this.$i18n.locale = t.$common.localRead("local")
			t.userInfo = $common.getUser();
			t.tabs[0].name = t.$t('record.PersonalAchievement')
			t.tabs[1].name = t.$t('record.DirectPushAchievement')
			t.tabs[2].name = t.$t('record.PushBetweenAchievement')

			console.info(t.userInfo)
			t.getData();
			t.getDataList();
		},
		methods: {
			tabSelect(item, index) {
				this.TabCur = index;
				this.list = this.tabs[index].list
				// this.getData(index);
			},
			// setList(order_state) {
			// 	if (order_state == '' && order_state.length == 0) {
			// 		this.orderList = this.list;
			// 		return false;
			// 	}

			// 	let orderlist = [];
			// 	for (let a in this.list) {
			// 		if (this.list[a].order_state == order_state) {
			// 			orderlist.push(this.list[a]);
			// 		}
			// 	}
			// 	this.orderList = orderlist;
			// },
			getData() {
				let data = {
					biChuOrRu: 1,
					biType: 200,
					addUserId: t.userInfo.id
				}
				t.$fetch.request('userBiRecord/appList', data).then((res) => {
					if (res.code == 200) {
						console.info("获取userBiRecord/list成功")
						t.datas = res.data;
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			},
			getDataList() {
				let data = {
					biChuOrRu: 1,
					biType: 200,
					biGetType: 2,
					addUserId: t.userInfo.id
				}
				t.$fetch.request('userBiRecord/appRecordList', data).then((res) => {
					if (res.code == 200) {
						console.info("getDataList获取userBiRecord/list成功")
						if (null != res.data.entityList) {
							t.list = res.data.entityList;
							t.tabs[0].list = res.data.entityList
							t.tabs[0].count = res.data.entityList.length
						}
						if (null != res.data.entityList) {
							t.tabs[1].list = res.data.zhituiList
							t.tabs[1].count = res.data.zhituiList.length
						}
						if (null != res.data.entityList) {
							t.tabs[2].list = res.data.jiantuiList
							t.tabs[2].count = res.data.jiantuiList.length
						}
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			}
		}
	}
</script>

<style>
	.border-bottom {
		border-bottom: 0.5px solid #353535;
	}

	.cu-card>.cu-item {
		margin: 0px;
	}

	.cu-card.article>.cu-item {
		padding: 0px;
	}

	.bg-custom-color {
		background-color: #FFFFFF;
		color: #333333;
	}

	.text-green {
		color: var(--et_font);
	}

	.wallet .cu-item:after {
		border-bottom: 0px solid #ddd;
	}

	.wallet .cu-item {
		background-color: #121E2E;
	}

	.lc2-son-par {
		display: flex;
		/* height: 30px; */
		/* line-height: 30px; */
		padding: 5px;
	}

	.lc2-son1-text {
		color: #5C7392;
		flex: 1;
		text-align: center;
	}

	.lc2-son2-text {
		flex: 1;
		text-align: center;
	}

	.cu-list.card-menu {
		overflow: hidden;
		margin-right: 0px;
		margin-left: 0px;
		border-radius: 0px;
	}

	.et-content {
		display: flex;
	}

	.et-text {
		flex: 1;
	}

	.lc1 {
		height: 60px;
		line-height: 60px;
		display: flex;
	}

	.lc1-box {
		/* display: inline-table; */
		flex: 1;
	}

	.lc1-1 {
		margin-left: 10px;
		font-weight: bold;
	}

	/* 
	.arrow {
		position: absolute;
		top: 0;
		right: 16px;
		bottom: 0;
		display: block;
		margin: auto;
		width: 16px;
		height: 16px;
		color: var(--grey);
		content: "\E6A3";
		text-align: center;
		font-size: 18px;
		font-family: cuIcon;
		line-height: 16px;
	} */
</style>
